<template>
	<view>
		<myhead left="1" txt="实名认证"></myhead>
		<block v-if="list.status !=1 && list">
			<block v-if="list.status==2">
				<view class="tsTxt">您已提交实名认证，正在审核中...</view>
			</block>
			<block v-else>
				<view class="slTxt">温馨提示：请上传原始的身份证正反面，请勿裁剪涂改，保证身份证信息清晰显示，否则无法通过审核</view>
				<view class="list">
					<view>姓名</view>
					<input type="text" placeholder="真实姓名" v-model="name"/>
				</view>
				<view class="list">
					<view>身份证号</view>
					<input type="text" placeholder="身份证号" v-model="nameNum"/>
				</view>
				<!-- <view class="imgMain" v-if="imgUrl.length" v-for="(item,index) in imgUrl" :key="index" >
					<block v-if="item">
						<image :src="item" :data-num="index" mode="widthFix"></image>
						<view class="btnX" :data-num="index" @tap="btnX">X</view>
					</block>
				</view> -->
				<view class="imgMain" v-if="imgUrl1" >
					<image :src="imgUrl1" mode="widthFix"></image>
					<view class="btnX" @tap="btnX" data-num=1>X</view>
				</view>
				<view class="imgMain" v-if="imgUrl2" >
					<image :src="imgUrl2" mode="widthFix"></image>
					<view class="btnX" @tap="btnX" data-num=2>X</view>
				</view>
				<view class="imgMain" v-if="imgUrl3" >
					<image :src="imgUrl3" mode="widthFix"></image>
					<view class="btnX" @tap="btnX" data-num=3>X</view>
				</view>
				<view class="slTxt">身份证上传</view>
				<view v-if="img1" class="imgBtn" @tap="imgBtn" data-num=1>
					<view>上传身份证正面</view>
					<view>保持图片的清晰可读</view>
				</view>
				<view v-if="img2" class="imgBtn" @tap="imgBtn" data-num=2>
					<view>上传身份证反面</view>
					<view>保持图片的清晰可读</view>
				</view>
				<view v-if="img3" class="imgBtn" @tap="imgBtn" data-num=3>
					<view>上传手持照片</view>
					<view>保持图片的清晰可读</view>
				</view>
				<view class="slTxt">示例：</view>
				<image class="slImg" src="../../static/sfzImg.png" mode="widthFix"></image>
				<view class="btn" @tap="tjBtn">
					确认提交
				</view>
			</block>
		</block>
		<block v-if="list && list.status==1">
			<view class="content">
				<view>您已通过实名认证</view>
				<view>
					<view>真实姓名</view>
					<view>{{list.name}}</view>
				</view>
				<view>
					<view>身份证号</view>
					<view>{{list.selfCard}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				imgUrl1:'',
				imgUrl2:'',
				imgUrl3:'',
				img1:true,
				img2:true,
				img3:true,
				name:null,
				nameNum:null,
				list:''
			}
		},
		onReady() {
			
		},
		onLoad() {
			
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			http.get('/api/user/accountInfo').then(res => {
				if (res.code == 200 && res.result) {
					this.list=res.result
				}
				uni.hideLoading();
			})
			//console.log(this.list)
		},
		methods: {
			imgBtn:function(e){
				console.log(http.baseURL)
				
				let that = this
				uni.chooseImage({
				    //count: 9, //默认9
				    //sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    //sourceType: ['camera'], //相机
				    success: function (res) {
				        //var imgnum = ((JSON.stringify(res.tempFilePaths)).slice(7)).slice(-2)
						//var imgnum = res.tempFilePaths
						//var imgnum = res.tempFiles[0].name
						console.log(res)
						//var asdasd = res
						const imgFiles = res.tempFilePaths
						uni.uploadFile({
							url: http.baseURL+'/sys/upload/uploadFile', //仅为示例，非真实的接口地址
							filePath: imgFiles[0],
							name: 'file',
							success: (res1) => {
								var res=JSON.parse(res1.data)
								//var imgUrl1=that.imgUrl1
								//imgUrl1[e.currentTarget.dataset.num-1]=res.fileUrl
								//console.log(imgUrl1);
								if(e.currentTarget.dataset.num==1){
									that.img1=false
									that.imgUrl1=res.fileUrl
								}
								if(e.currentTarget.dataset.num==2){
									that.img2=false
									that.imgUrl2=res.fileUrl
								}
								if(e.currentTarget.dataset.num==3){
									that.img3=false
									that.imgUrl3=res.fileUrl
								}
							}
						});
						// uni.showToast({
						//   title: asdasd,
						//   icon: 'none',
						//   duration:10000
						// });
						// var imglist=that.imgUrl
						// 	imglist[e.currentTarget.dataset.num-1]=res.tempFilePaths[0]
						// 	that.imgUrl=imglist
							//console.log(imglist.unshift(res.tempFilePaths[0]))
							//that.imgUrl=imglist.unshift(res.tempFilePaths[0])
						//console.log(res.tempFilePaths)
						//console.log(that.imgUrl)
						//console.log(res)
				    }
				});
			},
			btnX:function(e){
				// var imglist=this.imgUrl
				// var imglist1=this.imgUrl1
				//console.log(e)
				// imglist.splice(e.currentTarget.dataset.num,1)
				// imglist1.splice(e.currentTarget.dataset.num,1)
				if(e.currentTarget.dataset.num==1){
					this.img1=true
					this.imgUrl1=null
				}
				if(e.currentTarget.dataset.num==2){
					this.img2=true
					this.imgUrl2=null
				}
				if(e.currentTarget.dataset.num==3){
					this.img3=true
					this.imgUrl3=null
				}
				//console.log(imglist1)
			},
			tjBtn:function(){
				if(this.name && this.nameNum && this.imgUrl1 && this.imgUrl2 && this.imgUrl3){
					http.post('/api/user/authentication', {name: this.name,selfCard:this.nameNum,picUrl1:this.imgUrl1,picUrl2:this.imgUrl2,picUrl3:this.imgUrl3}).then(res => {
						//console.log(res)
						uni.showToast({
						  title: res.message,
						  icon: 'none',
						  duration:1000
						});
						if (res.code == 200) {
							setTimeout(function () {
							    uni.navigateBack({
							        delta: 1
							    });
							}, 1000);
						}
					})
				}else{
					uni.showToast({
					  title: '请完善认证信息',
					  icon: 'none'
					});
				}
				
			}
		}
	}
</script>

<style>
	page{
		background: #f7f9ff;
		padding-bottom: 10vw;
	}
	.tsTxt{
		padding: 6vw 4vw;
		background: #F0AD4E;
		color: #DD524D;
		font-size: 3.8vw;
	}
	.list{
		padding: 4vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #F2F2F2;
		color: #999999;
		background: #FFFFFF;
	}
	.list view{
		width: 22%;
	}
	.list input{
		flex: 1;
	}
	.img{
		width: 20vw;
		height: 20vw;
	}
	.imgBtn{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 4vw;
		padding: 10vw;
		background: #FFFFFF;
		color: #999999;
	}
	.imgBtn>view:nth-child(2){
		margin-top: 2vw;
		color: #24EBA9;
	}
	.imgMain{
		position: relative;
	}
	.imgMain image{
		width: 100%;
	}
	.btnX{
		width: 7vw;
		height: 7vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50vw;
		background: #333333;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 0;
	}
	.slTxt{
		color: #999999;
		font-size: 3.8vw;
		padding: 4vw;
	}
	.slImg{
		width: 100%;
	}
	.btn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 10vw;
	}
	.content>view:nth-child(1){
		text-align: center;
		padding: 6vw 0;
		font-size: 3.8vw;
		color: #DD524D;
	}
	.content>view:nth-child(2),.content>view:nth-child(3){
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 4vw;
		border-bottom: 1px solid #f7f9ff;
		color: #999999;
		font-size: 3.8vw;
	}
</style>
